<template>
  <div class="time-div">
    <div class="time-div-header">
      <div class="time-div-header-text">时间戳转换</div>
    </div>
    <div class="time-div-content">
      <div class="time-div-content-item">
        <div class="time-div-content-item-title">>>Unix时间戳定义</div>
        <div class="time-div-content-item-child">
          <div>现在的当地时间为：</div>
          <div><el-input v-model="localTime" size="small" disabled /></div>
          <div style="color: #ffffff">-></div>
          <div><el-button type="primary" size="small" @click="status = !status">{{ status? '暂停': '开始' }}</el-button></div>
        </div>
        <div class="time-div-content-item-child">
          <div>现在的当地时间为：</div>
          <div><el-input v-model="timetamp" size="small" disabled /></div>
          <div>秒</div>
          <div><el-input v-model="timetamp_now" size="small" disabled /></div>
          <div>毫秒</div>
        </div>
      </div>
    </div>
    <div class="time-div-content">
      <div class="time-div-content-item">
        <div class="time-div-content-item-title">>> Unix时间戳 转 当地时间</div>
        <div class="time-div-content-item-child">
          <div><el-input v-model="timetampInput" size="small" :placeholder="timetamp" /></div>
          <div><el-button type="primary" size="small" @click="UnixToTime">转换</el-button></div>
          <div><el-input v-model="timetampOutput" size="small" /></div>
        </div>
      </div>
    </div>
    <div class="time-div-content">
      <div class="time-div-content-item">
        <div class="time-div-content-item-title">>> 当地时间 转 Unix时间戳</div>
        <div class="time-div-content-item-child">
          <div><el-input v-model="timeInput" size="small" :placeholder="localTime" /></div>
          <div><el-button type="primary" size="small" @click="timeToUnix">转换</el-button></div>
          <div><el-input v-model="timeOutput" size="small" /></div>
        </div>
      </div>
    </div>
    <div class="time-div-content">
      <div class="time-div-content-item">
        <div class="time-div-content-item-title">>> 转换历史</div>
        <div v-for="(item, index) in timeList" :key="index" class="time-div-content-item-child">
          <div>{{ item.s }}</div>
          <div>==></div>
          <div>{{ item.e }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { time_default_now, timeUnix_now } from '@/utils'
import { strTimeToUnixTime, unixTimeToStrTime } from '@/utils'
import { mapGetters } from 'vuex'
export default {
  name: 'Timer',
  data() {
    return {
      status: true,
      timeObject: null,
      timetamp_now: 0,
      localTime: '',
      timetamp: 0,
      timeType: '0',
      timeZone: 8,
      timetampInput: '',
      timetampOutput: '',
      timeInput: '',
      timeOutput: ''
    }
  },
  computed: {
    ...mapGetters(['timeList'])
  },
  created() {
    this.getRunTime()
    this.getOutputTimestamp()
  },
  methods: {
    getOutputTimestamp() {
      this.timeObject = setInterval(() => {
        this.getRunTime()
      }, 1000)
    },
    getRunTime() {
      if (this.status) {
        this.timetamp_now = timeUnix_now(13, this.timeZone)
        this.timetamp = this.timetamp_now.slice(0, 10)
        this.localTime = time_default_now(null, this.timeZone)
      }
    },
    UnixToTime() {
      this.timetampOutput = ''
      if (this.timetampInput) {
        if (/^\d+$/.test(this.timetampInput)) {
          this.timetampOutput = unixTimeToStrTime('Y-m-d H:i:s', this.timetampInput, this.timeZone)
          this.$store.dispatch('time/addItem', { s: this.timetampInput, e: this.timetampOutput })
        } else {
          this.$alert('请填写数字')
        }
      } else {
        this.$alert('先填写你需要转换的时间戳')
      }
    },
    timeToUnix() {
      let length = 13
      if (this.timeType === '0') {
        length = 10
      }
      this.timeOutput = ''
      if (this.timeInput) {
        if (!/\d{2}-\d{2}-\d{2}( \d{2}:\d{2}:\d{2})?/.test(this.timeInput)) {
          this.$alert('时间格式为:' + this.localTime + '或' + this.localTime.slice(0, 10))
          return
        }
        this.timeOutput = strTimeToUnixTime(length, this.timeInput, this.timeZone)
        this.$store.dispatch('time/addItem', {
          s: this.timeInput, e: this.timeOutput
        })
      } else {
        this.$alert('先填写你需要转换的时间')
      }
    },
    changeTimeZone() {
      // this.getOutputTimestamp()
      this.timeToUnix()
      this.UnixToTime()
    }
  }
}
</script>

<style scoped>
  .time-div{
    padding: 10px 20px;
    font-size: 14px;
  }
  .time-div-header {
    background-color: #f8f8f8;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 56px;
    align-content: center;
    padding: 0 10px;
    border-radius: 3px;
    border: 1px solid #e7e7e7;
  }
  .time-div-header-text {
    line-height: 56px;
    color: #777777;
    font-size: 18px;
  }
  .time-div-header-timezone {
    line-height: 56px;
  }
  .time-div-content {
    padding: 10px 20px;
  }
  .time-div-content-item-title {
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    font-size: 16px;
    color: #428bca;
  }
  .time-div-content-item-child {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
  }
  .time-div-content-item-child>div{
    margin: 0 10px;
    line-height: 32px;
  }
  .el-button {
    width: 100px;
  }
</style>
